<template>
  <div id="container">
    <div id="header">
      <div @click="onShow">About</div>
      <ul id="hide_ul">
        <li>about web maker</li>
        <li>about the web</li>
      </ul>
    </div>
    <div id="login_wrap">
      <div id="head_protraint"></div>
      <div id="form_wrap">
        <input
          type="text"
          id="username"
          class="comminput"
          placeholder=" enter your username"
        />
        <input
          type="password"
          id="password"
          class="comminput"
          placeholder=" enter your password"
        />
        <input
          type="password"
          id="password"
          class="comminput"
          placeholder=" enter your password again"
        />
        <div id="word">welcome to my web about chinese culture</div>
        <input type="button" id="login" value="Register" />
        <!-- <div id="registe"></div> -->
      </div>
    </div>
    <div id="next_web" @click="toLogin"></div>
  </div>
</template>
<script>
export default {
  name: 'Register',
  methods: {
    toLogin () {
      this.$router.push('/login')
    },
    onShow () {
      document.getElementById('hide_ul').setAttribute('display', 'block')
    }
  }
}
</script>

<style lang="css" scoped>
#container {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(15deg, transparent, transparent 40%, #d6acac);
  background-image: url("../../imgs/Login_backgroud.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

#head_protraint {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(0, 0, 0);
  box-shadow: 2px 2px 3px 2px rgb(85, 85, 85);
  border-radius: 50%;
  background-image: url("../../imgs/loge.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #fff;
}

#login_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 350px;
  border: 4px solid rgb(49, 49, 49);
  transform: translate(-50%, -50%);
  border-radius: 15px;
  opacity: 0.85;
}

#form_wrap {
  position: absolute;
  height: 300px;
  width: 100%;
  top: 70px;
}

.comminput {
  margin-left: 45px;
  margin-top: 35px;
  border: none;
  border-radius: 20px;
  height: 32px;
  width: 260px;
  font-size: 18px;
  text-indent: 10px;
  box-shadow: 1px 1px 2px 1px rgb(128, 128, 128);
}
#word {
  position: absolute;
  top: 0%;
  width: 100%;
  text-align: center;
  color: #f59595;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 1px 1px 2px #fff;
}

#header {
  position: absolute;
  top: 1%;
  left: 1%;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: rgb(208, 246, 255);
  border: 2px solid rgb(169, 212, 250);
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-weight: 700;
  animation: an 2.5s linear infinite alternate;
}

@keyframes an {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0px, 5px);
  }
}

#hide_ul {
  display: none;
  height: 120px;
  width: 200px;
}
#hide_ul li {
  margin-top: 5px;
  background-color: rgb(225, 246, 255);
  height: 60px;
  width: 200px;
  text-align: left;
  color: rgb(97, 97, 97);
  text-indent: 14px;
  transition: all 0.5s linear;
}
#hide_ul li:hover {
  background-color: rgb(239, 255, 250);
  text-indent: 30px;
}
#login {
  position: absolute;
  height: 34px;
  width: 140px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  background-color: rgb(239, 255, 250);
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* #registe{
     background-image: url('../../imgs/收起箭头小2.png');
     background-size: 100%;
     height: 30px;
     width: 30px;
     border-radius: 50%;
     position: absolute;
     bottom: 0%;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color:#fff;
     cursor: pointer;
   } */

#next_web {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../../imgs/下箭头.png");
  background-size: 100%;
  height: 60px;
  width: 60px;
  transition: all 0.5s linear;
}

#next_web:hover {
  bottom: 1%;
}
</style>
